<template>
  <div>
    <button class="mybtn" @click="btnClick" @mouseover="over" ref="btnRef">11</button>
    <div class="map" id="map">map</div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import { OSM, XYZ, Vector as VectorSource } from "ol/source";
import View from "ol/View";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { fromLonLat } from "ol/proj"; //坐标类型转换
import {
  defaults as defaultInteractions,
  DragRotateAndZoom,
} from "ol/interaction";
import { defaults, FullScreen, MousePosition, ScaleLine } from "ol/control";
import Overlay from "ol/Overlay";

import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Style, Icon } from "ol/style";

export default {
  mounted() {
    const tileLayer = new TileLayer({
      source: new XYZ({
        url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      }),
    });
    this.map = new Map({
      layers: [tileLayer],
      view: new View({
        // center: fromLonLat([112.575916, 31.208539]), //地图中心点
        projection: "EPSG:4326", // 4326经纬度 3857投影
        center: [114.42415, 30.4477418],
        zoom: 15, // 缩放级别
        minZoom: 0, // 最小缩放级别
        maxZoom: 20, // 最大缩放级别
        constrainResolution: true, // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
      }),
      target: "map", // DOM容器
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      controls: defaults().extend([
        new FullScreen(), // 全屏
        new MousePosition(), // 显示鼠标当前位置的经纬度
        new ScaleLine(), // 显示比例尺
      ]),
    });
    // 添加点击事件
    this.map.on("click", (e) => {
      console.log("地图点击", e);
    });
    // 添加元素
    let marker = new Overlay({
      element: this.$refs.btnRef, // 要显示的元素
      position: [114.42415, 30.4477418], // 地图投影的位置
      offset: [-17, -17], // 元素显示的像素偏移量
      autoPan: true, // 自动移动地图以完整的显示元素
    });
    // 添加到地图
    this.map.addOverlay(marker);

    // 实例化要素
    // let feature = new Feature({
    //   geometry: new Point([114.42415, 30.4477418]), // 地理几何图形选用点几何
    // });
    // feature.setStyle([
    //   new Style({
    //     image: new Icon({
    //       anchor: [0, 0], // 显示位置
    //       size: [200, 200], // 尺寸
    //       src: require("../assets/logo.png"), // 图片url
    //     }),
    //   }),
    // ]);
    // // 矢量源
    // let source = new VectorSource({
    //   features: [feature],
    // });
    // // 矢量图层
    // let vector = new VectorLayer({
    //   source: source,
    // });
    // this.map.addLayer(vector);
  },
  methods: {
    btnClick() {
      let center = [114.42415, 30.4477418];
      this.map.getView().animate({
        center: center,
        duration: 1000,
        zoom: 15,
      });
    },
    over(){
      console.log('我被点击了')
    }
  },
};
</script>

<style>
.map {
  height: 1400px;
}
.mybtn {
  width: 50px;
  height: 50px;
  background-color: rgb(71, 184, 43);
}
</style>